<template>
  <div class="">
      <div class="icon-search-wrap">
        <div class="icon-input font-26px text-center">
          <i :class="iconValue"></i>
        </div>
        <div class="icon-input-search el-icon-search" @click="dialog = !dialog"></div>
      </div>
    <el-dialog :visible.sync="dialog" append-to-body title="图标">
      <el-input size="medium" v-model="searchValue">
        <template #append>
          <el-button  icon="el-icon-search" @click="search"></el-button>
        </template>
      </el-input>
      <div >
        <el-tabs v-model="currentIconType" >
          <el-tab-pane :label="icon.typeName" :name="icon.typeName" v-for="icon in iconGroups ">
            <div class="h-350px over-y-auto">
              <el-row >
                <el-col :span="6" v-for="i in icon.iconList">
                  <div style="padding: 25px;font-size: 20px ;box-sizing: border-box" class="el-card text-center hover-highlight" @click="choose(i)">
                    <i :class="i"></i>
                  </div>
                </el-col>
              </el-row>
            </div>

          </el-tab-pane>
        </el-tabs>
      </div>

    </el-dialog>
  </div>
</template>
<script >
import Service from "api/Service";
import http from "network/http";
import ApiResponse from "utils/ApiResponse";

export default {
  name: 'IconSelect',
  props:{
    value: {
      type: String ,
      value: ""
    }
  },
  data(){
    return {
      dialog: false ,
      currentIconType: '' ,
      iconGroups: [] ,
      searchValue: ''

    }
  },
  watch:{
    currentIconType(value){
      for(let i in this.iconGroups){
        let icon = this.iconGroups[i] ;
        if(icon.typeName === value){
          this.findIcon(value,(data)=>{
           let iconList =  data.map(ic=>ic.icon)
            this.$set(this.iconGroups , i , {iconList: iconList ,typeName:value } )
          })
          break
        }
      }


    }
  },
  computed:{
    iconValue:{
      get(){
        return this.value
      },
      set(val){
        this.$emit("input" , val)
      }
    }
  },
  mounted() {
    this.findIconGroup()
  },
  methods:{
    findIconGroup(){
      http.post(`${Service.xcdhBaseService}/icon/findIconGroup`).then(res=>{
        ApiResponse.init(res).ok(data=>{
          this.iconGroups = data ;
          if(data.length >0){
            this.currentIconType = data[0].typeName
          }
        })
      })
    },
    findIcon(name,callback){
      http.post(`${Service.xcdhBaseService}/icon/list`,{typeName: name}).then(res=>{
        ApiResponse.init(res).ok(callback)
      })
    },
    choose(i){
      this.iconValue = i ;
      this.dialog = false
    },
    search(){

    }
  }
}
</script>
<style scoped>
.icon-input,
.icon-input-search{
  height: 36px;
}
.icon-input-search{
  box-sizing: border-box;
  padding: 9px 15px;
  background-color: #F5F7FA;
  border-left: 1px solid #DCDFE6;
  cursor: pointer;
  border-bottom-right-radius: 4px;
  border-top-right-radius: 4px;
}
.icon-search-wrap{
  border: 1px solid #DCDFE6;
  display: flex;
  border-radius: 4px;
}
.icon-input{
  flex: 1;
  line-height: 36px;
}
.hover-highlight:hover{
  background-color: #409eff;
  color: #fff;
  cursor: pointer;
}
</style>